<template>
  <div class="submit-resolve">
    <div class="title">可配置多个提交按钮用于方便客户快速选择提交路径</div>
    <je-grid
      ref="grid"
      border
      auto-resize
      show-overflow="ellipsis"
      keep-source
      show-header-overflow
      resizable
      height="300"
      class="submit-resolve-grid"
      size="mini"
      header-align="center"
      :edit-config="{
        trigger: 'click',
        mode: 'cell',
        showUpdateStatus: true,
        showInsertStatus: false,
      }"
      :store="gridStore"
    >
      <je-column width="40" align="center">
        <template #header>
          <i style="font-size: 16px; cursor: pointer" class="fal fa-plus" @click="addColumn"></i>
        </template>
        <template #default="{ row }">
          <i
            style="font-size: 16px; cursor: pointer"
            class="fal fa-times"
            @click="deleteColumn(row)"
          ></i>
        </template>
      </je-column>
      <je-column
        field="buttonName"
        :title="$t('SubmitResolve.name')"
        width="50%"
        :edit-render="inputRender"
      >
        <template #edit="{ row }">
          <je-input v-model:value.trim="row.buttonName" />
        </template>
      </je-column>
      <je-column field="nodeId" :title="$t('SubmitResolve.code')" :edit-render="inputRender">
        <template #edit="{ row }">
          <je-select v-model:value="row.nodeId" :options="targetOptions" />
        </template>
        <template #default="{ row }">
          {{ getSelectLabel(row.nodeId, targetOptions) }}
        </template>
      </je-column>
    </je-grid>
  </div>
</template>

<script>
  import { defineComponent, ref, watch } from 'vue';
  import { Grid, Input, Select, Hooks, Data } from '@jecloud/ui';
  import { inputRender } from '@/helper/edit-render';

  export default defineComponent({
    name: 'SubmitResolve',
    components: {
      JeGrid: Grid,
      JeColumn: Grid.Column,
      JeInput: Input,
      JeSelect: Select,
    },
    props: {
      commitBreakdown: {
        type: Array,
        default: () => {
          return [];
        },
      },
      wfEditor: {
        type: Object,
        default: () => {
          return {};
        },
      },
      nodeId: {
        type: String,
        default: '',
      },
    },
    emits: ['changeNodeData'],
    setup(props, context) {
      const grid = ref(null);
      //列表数据
      const gridStore = Data.Store.useGridStore({
        data: Hooks.useModelValue({ props, context, key: 'commitBreakdown' }),
      });
      const targetOptions = ref([]);

      //添加列
      const addColumn = () => {
        const data = {
          buttonName: '',
          nodeId: '',
          nodeName: '',
        };
        gridStore.insert(data, -1);
      };

      //删除列
      const deleteColumn = (row) => {
        gridStore.remove(row);
      };

      //获得改节点的上级节点 组装成进入路径下拉框的数据
      const getTargetNodes = ($editor) => {
        const datas = [];
        if ($editor) {
          const selectNode = $editor.graph.getSelectionCell();
          if (selectNode && selectNode.edges && selectNode.edges.length > 0) {
            selectNode.edges.forEach((edge) => {
              const source = edge.source;
              //如果线的入口是本节点的话,那么这个线就是本节的出线
              if (source) {
                if (source.getId() == selectNode.getId()) {
                  const target = edge.target;
                  //这个线的入出口节点就是 本节的下一个节点
                  if (target) {
                    const name = target.getAttribute('label') || target.getAttribute('name');
                    const id = target.getId();
                    datas.push({ value: id, label: name });
                  }
                }
              }
            });
          }
        }
        targetOptions.value = datas;
      };

      //监听节点Id刷新数据
      watch(
        () => props.nodeId,
        () => {
          const $editor = props.wfEditor.editor.$editor;
          getTargetNodes($editor);
        },
        { immediate: true },
      );

      //列表单元格格式化
      const getSelectLabel = (value, list, valueProp = 'value', labelField = 'label') => {
        const item = list.find((item) => item[valueProp] === value);
        return item ? item[labelField] : null;
      };

      return {
        gridStore,
        addColumn,
        deleteColumn,
        inputRender,
        grid,
        targetOptions,
        getSelectLabel,
      };
    },
  });
</script>

<style lang="less" scoped>
  .submit-resolve {
    .title {
      height: 32px;
      line-height: 32px;
      text-align: center;
      background: #f0f4f9;
    }
  }
</style>
<style lang="less">
  .submit-resolve {
    .submit-resolve-grid {
      .vxe-table--render-default .vxe-table--border-line {
        border-left: 0 !important;
        border-bottom: 0 !important;
      }
    }
  }
</style>
